<template>
  <div>
    <header class="header-content">
      <div class="header-icon-back" @click="to('addressList')"><span></span></div>
      <div class="header-title">编辑地址</div>
    </header>
    <div class="view-content">
      <div class="Edit-content">
        <div class="Edit-cell">
          <label for="person">收货人</label>
          <input type="text" id="person">
        </div>
        <div class="Edit-cell">
          <label for="tel">手机号码</label>
          <input type="text" id="tel">
        </div>
        <div class="Edit-cell">
          <label for="location">所在地区</label>
          <input type="text" id="location">
        </div>
        <div class="Edit-cell">
          <label for="address">详细地址</label>
          <input type="text" id="address">
        </div>
        <div class="Edit-cell">
          <label class="set-as" for="select">设为默认地址</label>
          <input class="addressEdit-checkbox" type="checkbox" id="select">
        </div>
      </div>
      <div class="btn-area">
        <div class="save">保存此地址</div>
        <div class="del">删除此地址</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  @import "../css/style.css";
  
  .set-as {
    font-size: 1rem;
    flex: 1;
  }
  .btn-area {
    margin: 1.2rem 0.94rem;
  }
  .save {
    font-size: 1.125rem;
    background-color: #1aad19;
    color: #fff;
    line-height: 2.56rem;
    border-radius: 0.3125rem;
  }
  .del {
    font-size: 1.125rem;
    background-color: #e64340;
    margin-top: 0.9375rem;
    color: #fff;
    line-height: 2.56rem;
    border-radius: 0.3125rem;
  }
</style>
<script>
  export default {
    methods: {
      to(page) {
        this.$router.push({
          name: page
        })
      }
    }
  }
</script>

